<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>文件管理器</title>
		<style type="text/css">
			html,body{padding: 0;margin: 0;}
			#App{background: transparent;width: 100vw;height: 100vh;display: flex;flex-direction: column;}
			#App .mask {background: rgba(0,0,0,.4);flex: 1;z-index: 12;}
			.file-content{z-index: 12; height: 60px;background: #fff;display: flex;justify-content: center;align-items: center;position: fixed;bottom: 0;left: 0;width: 100%;}
			.btn{position: relative;}
			.btn .btn-bg {background: #0066CC;color: #fff;width: 100%;border-radius: 5px;padding: 8px 10px;border: 0;}
			.btn .file {position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;opacity: 0;}
			.tis{
				position: fixed;width: 100%;height: 100%;align-items: center;justify-content: center;z-index: 12;display: none;
			}
			.tis-content{
				width: 60%;background-color: #fff;padding: 20px 0;border-radius: 5px;display: flex;flex-direction: column;align-items: center;
			}
			.tis-content .tis-content-image{width: 60px;height: 60px;}
			.tis-content .tis-content-image img{width: 100%;height: 100%;}
			.tis-content .tis-progress{margin: 10px 0;}
			.cancel-btn {background: #e3e3e3;color: #898989;border: 0;border-radius: 5px;}
		</style>
	</head>
	<body>
		<div id="App">
			<div class="mask" @click="closeCurrentWebview"></div>
			<div class="tis" :style="{display:showUp?'flex':'none'}">
				<div class="tis-content">
					<div class="tis-content-image">
						<img src="../images/shangchuan.png" >
					</div>
					<div class="tis-progress">
						{{progress}}
					</div>
					<div class="cancel">
						<button type="button" class="cancel-btn" @click="cancelUP">取消上传</button>
					</div>
				</div>
			</div>
			
			<div class="file-content">
				<div class="btn">
					<button type="button" class="btn-bg">打开文件管理器</button>
					<input ref="referenceUpload" class="file" type="file" @change="changeFile"/>
				</div>
			</div>
		</div>
		<!-- uni 的 SDK -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/global.js"></script>
		<!-- <script type="text/javascript" src="../js/wps/web-office-sdk-v1.1.2.umd.js"></script> -->
		<script type="text/javascript">
			document.addEventListener('UniAppJSBridgeReady', function() {
				let that,xhr
				new Vue({
					el: '#App',
					data: {
						showUp:false,//是否显示上传进度
						progress:'',//进度条
					},
					mounted() {
						that=this
					},
					methods: {
						//取消上传
						cancelUP(){
							xhr.abort()
							//关闭当前webview
							that.closeCurrentWebview()
						},
						//关闭当前webview
						closeCurrentWebview(){
							plus.webview.currentWebview().close();
						},
						//限制上传文件格式
						restrictFormatUploaded(name){
							let mun=name.indexOf('.')
							let sliceName=name.slice(mun,name.length)
							let filetypes =["jpg","jpeg","png","rar","txt","zip","doc","ppt","xls","pdf","docx","xlsx","mp4","wmv","avi","mp3","m4a","wma",
							"JPG","JPEG","PNG","RAR","TXT","ZIP","DOC","PPT","XLS","PDF","DOCX","XLSX","MP4","WMV","AVI","MP3","M4A","WMA"];
							let arr=filetypes.filter((res)=>{
								if(sliceName.includes(res)){
									return res
								}
							})
							let onoff=false
							if(arr.length>0){
								onoff=true
							}else{
								onoff=false
							}
							return onoff
						},
						//选取文件
						changeFile(event){
							let {url,key,header,formData} = plus.webview.currentWebview();
							//上传成功后记得置空value否则不触发change事件 通过this.$refs.referenceUpload.value=null
							console.log('文件名',JSON.stringify(event.target.files[0].name));
							//限制上传文件格式
							let onoff=that.restrictFormatUploaded(event.target.files[0].name)
							if(!onoff){
								plus.nativeUI.toast('不支持的上传文件类型');
								this.$refs.referenceUpload.value=null
								return
							}
							let file = event.target.files[0];
							if(file.size > (1024*1024 * 10)) {
								plus.nativeUI.toast('单个文件请勿超过10M,请重新上传');
								this.$refs.referenceUpload.value=null
								return;
							}
							that.showUp=true
							that.createUpload(file, url, key,header,formData);
						},
						createUpload(file, url, key='file', header = {},data = {}){
							console.log(`上传地址:${url}\n请求头:${JSON.stringify(header)}\n参数:${JSON.stringify(data)}`);
							if (!url) {return;}
							let formData = new FormData();
								formData.append(key, file);
							for (let keys in data) {
								formData.append(keys, data[keys]);
							}
							xhr = new XMLHttpRequest();
							xhr.open("POST", url, true);
							//设置请求头
							for (let keys in header) {
								xhr.setRequestHeader(keys, header[keys]);
							}
							//监听进度条
							xhr.upload.addEventListener("progress", function(event) {
								if(event.lengthComputable){
									that.progress ='努力上传中..'+ Math.ceil(event.loaded * 100 / event.total) + "%";
								}
							}, false);
							xhr.ontimeout = function(){
								// xhr请求超时事件处理
								that.progress= '请求超时';
								setTimeout(()=>{
									that.showUp=false
									//关闭当前webview
									that.closeCurrentWebview()
								},1000);
							};
							xhr.onreadystatechange = (ev) => {
								if(xhr.readyState == 4) {
									console.log('status：'+xhr.status);
									if (xhr.status == 200) {
										console.log('返回数据：'+xhr.responseText);
										if(JSON.parse(xhr.responseText).flag){
											that.progress = '上传成功';
											location.href = `callback?fileName=${escape(file.name)}&id=${escape(xhr.responseText)}`;
										}else{
											plus.nativeUI.toast(JSON.parse(xhr.responseText).msg);
											that.progress = JSON.parse(xhr.responseText).msg;
										}
										
									}
									else {
										that.progress = '上传失败了';
									}
									
									setTimeout(()=>{
										that.showUp=false
										//关闭当前webview
										that.closeCurrentWebview()
									},1000);
									
								}
							};
							xhr.send(formData);
							
							
						},
						
					}
				})
			});
			
		</script>
	</body>
</html>
